Кейс по разработке образовательного проекта

Тестирование получает все большее значение в качестве инструмента оценки знаний учащихся и контроля усвоения материалов. Родители хотят получать точные рекомендации по развитию ребенка, педагоги — автоматизировать процессы проверки знаний. Поэтому разработка образовательных проектов в виде тестов — важное и перспективное направление в программировании и создании веб-сервисов. Этот кейс мы посвящаем созданию интерактивной платформы i-Umka. Без преувеличения, это один из самых сложных, интересных и многообещающих проектов, над которыми нам приходилось работать.

Цель разработки заключается в том, чтобы не просто рассказать о платформе. Но и показать ее в действии, а также убедительно продемонстрировать преимущества. i-Umka предлагает следующие ключевые возможности:

• Ребенок увлекательно проводит время, играя в онлайн-игры и одновременно проходя тестирование.
• Родители получают оценку его способностей, советы по направлениям развития. С помощью рекомендаций можно подобрать индивидуальную программу обучения, подтянуть слабые места.
• Воспитатели смогут оценивать степень усвоения учебного материала, устанавливать наклонности детей.
• Педагоги смогут оценить знания ребенка перед поступлением в школу. В дальнейшем планируется совместное с образовательными организациями составление тестов, чтобы они внедряли отбор через платформу.
• С помощью i-Umka можно проводить тесты, разрабатывать учебные занятия, использовать их при прохождении школьной или дошкольной программы.

Платформа была представлена в Интернете и ранее. Но с первого взгляда на прежний ресурс было заметно, что оформление устарело. Многие дошкольники играют в компьютерные игры с более актуальным дизайном, и графика такого рода их вряд ли заинтересовала бы. Старый промосайт не выглядел убедительно, не раскрывал преимущества платформы, тесты были непонятными и плохо оформленными.

Работу мы начали с проектирования, в ходе которого исследовались данные, необходимые и для лендинга, и комплексные, для всего проекта, включая создание самих тестов.

Первым этапом мы всестороннее проанализировали задачу и цели платформы. Далее провели анализ ЦА.

В результате получилось, что основные ее сегменты — это:

• Родители. Как правило, активные и продвинутые, которые занимаются развитием своего ребенка, хорошо владеют навыками работы с компьютером и интернетом. Хотят выстроить индивидуальную программу образования и узнать, насколько ребенок готов к школе.
• Учителя. Современные, которые перестраиваются на цифровой формат. Им удобно и выгодно, чтобы появился инструмент, который автоматизирует часть их работы. Но для существенной доли преподавателей характерен невысокий уровень владения цифровыми технологиями.
• Руководители образовательных заведений. Многие из них хотят внедрять прогрессивные методы работы.
• Дошкольники. Платформа предназначается детям в возрасте от 4 до 7 лет. Ребенок уже имеет навыки обращения с компьютером и интерактивными играми. Ему интересны тесты именно в игровой форме.

Изучили сайты похожих проектов. Прямыми конкурентами оказались:

• uchi.ru — сильный сайт, с хорошей проработкой, функционалом и дизайном.
• umnazia.ru — достойный в целом конкурент.
• edutimeline.asi.ru — примечательна детальная проработка воронки продаж.

После обобщения всей собранной информации уже вырисовывалась структура сайта. После согласования с заказчиком мы начали делать прототип.

Последовательно структура блоков сайта и каждый ее элемент были воплощены в прототипах. В структуру вошли:

• Шапка,
• Главный экран,
• Пробный тест,
• Раздел «Для кого УМКА»: для детей /родителей /преподавателей /школ,
• Фотографии детей и педагогов, которые воспользовались платформой,
• Отзывы,
• Подвал.

Выдержана спокойная бело-синяя цветовая гамма. Дизайн включает интерактивные элементы. Мультипликационные герои — медведь, рыбки — наша авторская работа. И наша гордость!

В рамках разработки дизайна созданы три персонажа, которых посетители увидят на платформе. Дизайнеры нарисовали медведя в очках дополненной реальности и рыбок, которых он ловит.

Прототипом главного персонажа стал, конечно, всем известный по мультику медвежонок Умка. Но сходство с ним лишь отдаленное! Необходимо было сделать образ, который, кроме очевидной отсылки к доброму и забавному персонажу мультфильма, также символизировал бы и современность. Именно для этого наш мишка получил очки виртуальной реальности. Две рыбки дополняют общую концепцию.

Фокус в том, что из этого рисунка плавно вытекает остальной дизайн сайта. Сочетание белого с синим воспринимается очень спокойно, при этом позволяет выделять важные блоки на сайте и акцентировать внимание пользователя. Мы использовали стилистику современной мультипликации.

В основе дизайна не использовано ни одной стоковой фотографии. Все иллюстрации — оригинальные. Практически все текстовое содержание сайта (заголовки блоков, текст в блоках, в шапке, в подвале и прочее) имеют строго определенный дизайн — шрифт, цвет, размер, начертание. Это сделано для того, чтобы единая стилистика ресурса не размывалась.

Еще важная деталь — для проекта мы создали текстово-графический логотип i-UMKA.

Для заказчика ключевым моментом выступала адаптивность веб-сервиса и пробных игровых тестов. Нужно было сделать так, чтобы  прохождение игровых заданий было комфортным при любом положении устройства. Тесты корректно отображаются и в горизонтальной, и вертикальной версии.

В итоге ресурс получил отзывчивый дизайн, адаптированный под различные размеры экранов:

1.  1170 пикселей;
2.  720 пикселей;
3.  360 пикселей.

В зависимости от размера ширины окна браузера для отображения выбирается максимально широкая версия дизайна сайта. В мобильной и планшетной версии не используются мелкие элементы, которые могли бы создавать пользователям неудобства.

Помимо того, что для первого этапа разработки этого образовательного проекта мы сделали адаптивный лендинг, было множество интересных деталей:

• В основе дизайна не использовано ни одной стоковой фотографии. Все иллюстрации — оригинальные.
• Нарисовали персонажей (медведя в очках дополненной реальности, рыбок, которых он ловит), которых посетители могут видеть на платформе. Прототипом главного персонажа стал, конечно, всем известный по мультику медвежонок Умка.
• Создали текстово-графический логотип i-UMKA.
• Разработали 3 игры-теста с красивым дизайном.
• Внедрили систему оценки результатов и вывод статистики.

В целом, веб-сервис для прохождения пробных тестов дошкольниками — это микромодель всей платформы.

Кейс по разработке образовательного проекта должен продемонстрировать, как достигается результат: целевое действие клиента на сайте. В случае платформы онлайн-тестов i-UMKA — это регистрация на площадке и прохождение ребенком пробного теста.

Посмотрим, какие элементы промосайта последовательно приводят посетителя к целевому действию:

• Шапка оформлена презентабельно и дает представление о навигации на ресурсе. В ней выводятся логотип i-Umka, поле для входа или регистрации, ссылки на главные блоки —«Преимущества», «Пробный тест», «Для кого Умка?», «Что дает Умка?», «Отзывы», «Контакты». При прокрутке страницы шапка занимает фиксированное положение в верхней части браузера.
• Сверху располагается описание — основные характеристики платформы.
• Промоблок занимает 100% ширины экрана по вертикали и горизонтали.
• Предусмотрена демонстрация RTB-показателей: наград, достижений участников в виде «Доски почета», цифр успеха.
• Преимущества представлены в виде 8 информационных блоков, из каждого можно перейти посылке к более подробной информации.
• Пробный тест выполнен ярким, с интерактивными элементами. Его предваряет заголовок «Поможем выявить и развить таланты вашего ребенка».
• Далее располагается блок «Для кого» с перечислениями преимуществ для основных сегментов ЦА.
• Блок «История успеха» содержит краткую информацию с положительными примерами участников проекта. Выводится после заголовка «Посмотрите на детей, которые прошли тест на платформе i-UMKA».
• Далее содержится набор отзывов с фото или видео.
• Подвал, который на всех страницах сайта имеет единый вид и набор информации. Щелкнув по логотипу, можно вернуться в начало страницы. Предусмотрены контактные данные: номер телефона для звонка и адрес электронной почты. Выводится ссылка на политику конфиденциальности. Наглядно представлены значки социальных сетей, в которых есть сообщества проекта.

Для того чтобы пользователям было максимально комфортно, регистрация проста: требуется только указать email и придумать пароль. А сам пробный тест — максимально интересный и привлекательный, с красивым дизайном, симпатичными персонажами и классной графикой. Он включает 3 игры, на восприятие и мышление. Внедрена методика расчета результатов тестирования.

После прохождения выводится результат, который содержит:

• Имя, фамилию, возраст ребенка при условии, что они были указаны. Если данные имеются, статистику можно отправить на почту.
• Общий вывод и три отдельных — по каждому из пройденных тестов.
• В конце показывается итоговый вывод, а также демонстрируются графики, характеризующие способности ребенка.

На площадке реализован доступ в личный кабинет. Планируется 4 уровня:

1.  Родительский.
2.  Для педагога.
3.  Детский.
4.  Директорский.

Ресурс получил простой и понятный интерфейс, поскольку веб-сервис предназначен для пользователей с разным опытом работы с компьютером. Система управления реализована на основе CMS Umbraco 7.12.2 и содержит базовый набор функций.

Этот кейс, посвященный разработке образовательного проекта  i-UMKA, будет полезен разработчикам, интернет-маркетологам, веб-дизайнерам. Его содержание наверняка заинтересует тех, кто хочет заказать аналогичную разработку. И всех, кому интересны веб-сервисы для проведения психологического и педагогического тестирования. Это директора учебных заведений, учителя, воспитатели, родители.